<template>
	<view class="pay-pwd-mask" @click="closePwd" v-if="show">
		<view class="pay-pwd-container" @click.stop="">
			<!-- 头部 -->
			<view class="pwd-header">
				<text class="header-title">请输入支付密码</text>
				<view class="close-btn" @click="closePwd">
					<uni-icons type="closeempty" size="24" color="#999999"></uni-icons>
				</view>
			</view>
			
			<!-- 金额显示 -->
			<view class="amount-box" v-if="amount">
				<text class="amount-label">支付金额</text>
				<view class="amount-value">
					<text class="amount-symbol">¥</text>
					<text class="amount-num">{{ amount }}</text>
				</view>
			</view>
			
			<!-- 密码输入框 -->
			<view class="pwd-input-box">
				<view class="pwd-input-container">
					<view 
						class="pwd-input-item" 
						v-for="(item, index) in 6" 
						:key="index"
						:class="{active: password.length === index}"
					>
						<view class="pwd-dot" v-if="password.length > index"></view>
					</view>
				</view>
				<!-- 隐藏的真实输入框 -->
				<input 
					class="real-input" 
					type="number" 
					v-model="password" 
					:focus="inputFocus"
					maxlength="6"
					@input="onInput"
					@confirm="confirmPwd"
				/>
			</view>
			
			<!-- 提示信息 -->
			<view class="pwd-tips">
				<uni-icons type="info" size="14" color="#999999"></uni-icons>
				<text class="tips-text">请输入6位支付密码</text>
			</view>
			
			<!-- 忘记密码 -->
			<view class="forget-pwd" @click="forgetPwd">
				<text class="forget-text">忘记密码？</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'PayPwd',
	props: {
		show: {
			type: Boolean,
			default: false
		},
		amount: {
			type: [String, Number],
			default: ''
		}
	},
	data() {
		return {
			password: '',
			inputFocus: false,
			submitting: false // 防止重复提交
		}
	},
	watch: {
		show(val) {
			if (val) {
				this.password = ''
				this.submitting = false // 重置提交状态
				// 延迟聚焦，确保弹窗动画完成
				setTimeout(() => {
					this.inputFocus = true
				}, 300)
			} else {
				this.inputFocus = false
				this.submitting = false // 关闭时也重置
			}
		}
	},
	methods: {
		onInput(e) {
			// 如果已经在提交中，忽略输入
			if (this.submitting) {
				return
			}
			
			let value = e.detail.value
			// 只允许输入数字
			value = value.replace(/[^\d]/g, '')
			// 限制6位
			if (value.length > 6) {
				value = value.substring(0, 6)
			}
			this.password = value
			
			// 自动提交（输入完6位）
			if (value.length === 6 && !this.submitting) {
				this.submitting = true // 设置提交锁
				// 延长显示时间到500ms，让用户看到完整的6个密码点
				setTimeout(() => {
					this.$emit('confirm', this.password)
					// 提交后的清理工作由父组件关闭弹窗时处理
				}, 500)
			}
		},
		confirmPwd() {
			// 防止重复提交
			if (this.submitting) {
				return
			}
			
			if (this.password.length !== 6) {
				uni.showToast({
					title: '请输入6位支付密码',
					icon: 'none'
				})
				return
			}
			
			this.submitting = true
			this.$emit('confirm', this.password)
		},
		closePwd() {
			this.$emit('close')
		},
		forgetPwd() {
			this.$emit('forget')
			this.closePwd()
		}
	}
}
</script>

<style scoped>
.pay-pwd-mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.6);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.pay-pwd-container {
	width: 680rpx;
	background: #ffffff;
	border-radius: 24rpx;
	overflow: hidden;
	animation: slideUp 0.3s ease;
}

@keyframes slideUp {
	from {
		transform: translateY(100rpx);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

/* 头部 */
.pwd-header {
	position: relative;
	padding: 40rpx 30rpx 30rpx;
	border-bottom: 1rpx solid #f0f0f0;
}

.header-title {
	font-size: 32rpx;
	color: #333333;
	font-weight: 600;
	text-align: center;
	display: block;
}

.close-btn {
	position: absolute;
	right: 20rpx;
	top: 30rpx;
	width: 60rpx;
	height: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* 金额显示 */
.amount-box {
	padding: 40rpx 30rpx;
	text-align: center;
	background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}

.amount-label {
	font-size: 26rpx;
	color: #999999;
	display: block;
	margin-bottom: 16rpx;
}

.amount-value {
	display: flex;
	align-items: baseline;
	justify-content: center;
}

.amount-symbol {
	font-size: 32rpx;
	color: #FF6B6B;
	font-weight: bold;
	margin-right: 8rpx;
}

.amount-num {
	font-size: 56rpx;
	color: #FF6B6B;
	font-weight: bold;
}

/* 密码输入框 */
.pwd-input-box {
	position: relative;
	padding: 50rpx 30rpx 30rpx;
}

.pwd-input-container {
	display: flex;
	justify-content: space-between;
	gap: 16rpx;
}

.pwd-input-item {
	flex: 1;
	height: 96rpx;
	border: 2rpx solid #e0e0e0;
	border-radius: 12rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fafafa;
	transition: all 0.3s;
	position: relative;
}

.pwd-input-item.active {
	border-color: #667eea;
	background: #ffffff;
	box-shadow: 0 0 0 4rpx rgba(102, 126, 234, 0.1);
}

.pwd-input-item.active::after {
	content: '';
	position: absolute;
	width: 2rpx;
	height: 40rpx;
	background: #667eea;
	animation: blink 1s infinite;
}

@keyframes blink {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
}

.pwd-dot {
	width: 20rpx;
	height: 20rpx;
	background: #333333;
	border-radius: 50%;
}

.real-input {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	z-index: 10;
}

/* 提示信息 */
.pwd-tips {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20rpx 30rpx;
	gap: 8rpx;
}

.tips-text {
	font-size: 24rpx;
	color: #999999;
}

/* 忘记密码 */
.forget-pwd {
	padding: 20rpx 30rpx 40rpx;
	text-align: center;
}

.forget-text {
	font-size: 26rpx;
	color: #667eea;
}
</style>
